﻿@model GameOn.Web.Models.PlayModel
@{
    Layout = "~/Views/Shared/_Layout_m.cshtml";
}

<div data-role="header">
    <h1>@Model.Player1.Name vs @Model.Player2.Name</h1>
	<div data-role="navbar">
		<ul>
			<li><a href="/" data-icon="home">Home</a></li>
			<li><a href="/Matches/New" data-icon="search">Play!</a></li>
            <li><a href="/Players/Ladder" data-icon="info">Ladder</a></li>
            <li><a href="/Matches/" data-icon="info">Matches</a></li>
		</ul>
	</div><!-- /navbar -->
</div>

<div data-role="content">
    
    <script type="text/javascript">
        $(document).ready(function () {
            $("#PlayForm").validate();
        });
    </script>    
    
    <form id="PlayForm" action="/Matches/Played" method="POST">
        <input type="hidden" name="Player1" value="@Model.Player1.Id"/>
        <input type="hidden" name="Player2" value="@Model.Player2.Id"/>

        <fieldset data-role="controlgroup">
            <legend>Who won?</legend>
            <input type="radio" name="WinnerId" id="radio-choice-1" value="@Model.Player1.Id" class="required" />
            <label for="radio-choice-1">@Model.Player1.Name <small>(@Model.Player1.CurrentRank)</small></label>

            <input type="radio" name="WinnerId" id="radio-choice-2" value="@Model.Player2.Id" class="required" />
            <label for="radio-choice-2">@Model.Player2.Name <small>(@Model.Player2.CurrentRank)</small></label>
        </fieldset>

        <fieldset>
            <label for="radio-choice-1">Score</label>
            <input type="text" name="Score" placeholder="e.g. 11-3, 6-11, 12-10" />
        </fieldset>
    
        <button>Done</button>
    </form>
</div><!-- /content -->

